<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram Redraw</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.lineCap = 'round';

        // Center point for the diagram
        const cx = canvas.width / 2;
        const cy = 270;

        // --- Helper function to draw an arrow ---
        function drawArrow(fromX, fromY, toX, toY, headLength = 12) {
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.stroke();

            // Arrowhead
            ctx.beginPath();
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Draw the fixed support (ceiling) ---
        const supportY = 120;
        const supportWidth = 140;
        ctx.beginPath();
        ctx.moveTo(cx - supportWidth / 2, supportY);
        ctx.lineTo(cx + supportWidth / 2, supportY);
        ctx.stroke();

        // Hash marks for the support
        const numHashes = 7;
        for (let i = 0; i <= numHashes; i++) {
            const x = (cx - supportWidth / 2) + (i * supportWidth / numHashes);
            ctx.beginPath();
            ctx.moveTo(x, supportY);
            ctx.lineTo(x - 12, supportY - 12);
            ctx.stroke();
        }

        // --- Draw the suspension thread ---
        ctx.beginPath();
        ctx.moveTo(cx, supportY);
        ctx.lineTo(cx, cy);
        ctx.stroke();

        // --- Draw the needle ---
        const needleLength = 280;
        const needleHalfThickness = 3;
        ctx.beginPath();
        ctx.moveTo(cx - needleLength / 2, cy - needleHalfThickness);
        ctx.lineTo(cx + needleLength / 2, cy - needleHalfThickness);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(cx - needleLength / 2, cy + needleHalfThickness);
        ctx.lineTo(cx + needleLength / 2, cy + needleHalfThickness);
        ctx.stroke();

        // --- Set font for symbols ---
        ctx.font = '24px "Times New Roman"';
        ctx.textAlign = 'center';

        // --- Define angle and vectors ---
        const angleTheta = -Math.PI / 7.5; // Approx -24 degrees

        // --- Draw vector μ (mu) ---
        const muLength = 160;
        drawArrow(cx, cy, cx + muLength, cy);
        ctx.fillText('μ', cx + muLength + 20, cy + 10);

        // --- Draw vector B ---
        const bLength = 200;
        const bx = cx + bLength * Math.cos(angleTheta);
        const by = cy + bLength * Math.sin(angleTheta);
        drawArrow(cx, cy, bx, by);
        ctx.fillText('B', bx + 20, by);

        // --- Draw angle arc θ ---
        const arcRadius = 70;
        ctx.beginPath();
        ctx.arc(cx, cy, arcRadius, angleTheta, 0); // Start from angleTheta, end at 0 (horizontal)
        ctx.stroke();

        // Draw theta symbol
        const thetaLabelAngle = angleTheta / 2;
        const thetaX = cx + (arcRadius + 22) * Math.cos(thetaLabelAngle);
        const thetaY = cy + (arcRadius + 22) * Math.sin(thetaLabelAngle);
        ctx.fillText('θ', thetaX, thetaY + 8);

        // --- Draw the figure label ---
        ctx.font = 'bold 24px "Times New Roman"';
        ctx.fillText('Fig. 1.41', cx, cy + 150);

    </script>
</body>
</html>